<template>
	<view class="container">
		<view class="detail">
			<view class="detail_top">
				<image src="https://upyun.dinghuale.com/uploads/images/logo.png" mode="widthFix" class="logo"></image>
				<image src="/static/detail/WechatIMG262 1.png" mode="widthFix" class="nav" @click="showNav"></image>
				<view class="nav_list" v-if="show">
					<navigator class="nav_item" open-type="switchTab" :url="item.pagePath" v-for="(item,i) in navList"
						:key="i">
						<view class="iconfont" style="font-size: 18px;" v-html="item.icon"></view>
						<text style="font-size: 12px;padding-left: 10px;">{{item.text}}</text>
					</navigator>
				</view>
			</view>
			<view class="detail_cont">
				<!-- 轮播图 -->
				<swiper class="banner" :autoplay="true" :indicator-dots="true" :interval="3000" :duration="500"
					:current="1">
					<swiper-item v-for="(item,i) in pro_info.s_goods_photos" :key="i">
						<image :src="item.path" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
				<!-- 产品信息 -->
				<view class="info">
					<view class="pro_name">{{pro_info.name}}</view>
					<view class="pro_sale">
						<text class="sale_price">￥{{pro_info.sale_price}}
							<text class="price">￥{{pro_info.price}}</text>
						</text>
						<text class="sold_num">已售{{pro_info.sold_num}}笔</text>
					</view>
				</view>
				<!-- 产品描述 -->
				<view class="desc">
					<view class="desc_item" v-for="(item,i) in descList" :key="i">
						<text class="title">{{item.title}}</text>
						<text class="content">{{item.content}}</text>
					</view>
				</view>
				<!-- 数量 -->
				<view class="num">
					<text class="title">数量</text>
					<u-number-box v-model="num" :max="pro_info.stock_num"></u-number-box>
					<text class="stock_num">库存{{pro_info.stock_num === -1 ? 0 :pro_info.stock_num}}件</text>
				</view>
				<!-- 评论 -->
				<view class="comment">
					<view class="comment_top">
						<view class="title">订单评价</view>
						<view class="comment_num">最近已有1234条评论</view>
					</view>
					<view class="comment_list">
						<view class="comment_item" v-for="(item,index) in commentList" :key="index">
							<view class="item_head">
								<view class="item_head_user">
									<image src="/static/detail/morenTou.png.png" style="width: 20px;" mode="widthFix">
									</image>
									<view class="item_head_user_phone">{{formatPhone(item.name)}}</view>
								</view>
								<view class="item_head_star">
									<u-icon name="star-fill" v-for="(num,i) in item.stock_num" :key="i" size="14"
										color="#884e22"></u-icon>
								</view>
							</view>
							<view class="item_body">
								<view class="item_body_text" v-html="item.rich_text"></view>
								<view class="item_body_img">
									<image class="img" v-for="(img,i) in item.s_goods_photos" :key="i" :src="img.path"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="comment_bottom" @click="goComment">查看更多评价</view>
				</view>
				<!-- 商品详情 -->
				<view class="pro_detail">
					<view class="title">商品详情</view>
					<view class="content" v-html="pro_info.rich_text"></view>
				</view>
			</view>
			<view class="detail_bottom">
				<view class="nav_item">
					<view class="iconfont icon">&#xe611;</view>
					<text>电话</text>
				</view>
				<view class="nav_item">
					<view class="iconfont icon">&#xe698;</view>
					<text>客服</text>
				</view>
				<view class="nav_item" @click="goCart">
					<view class="iconfont icon">&#xe638;</view>
					<text>购物车</text>
					<text class="dot" v-if="allNum">{{allNum}}</text>
				</view>
				<view class="addCart nav_item2" style="background-color: #3D4D42;" @click="addCart">
					加入购物车
				</view>
				<view class="buy nav_item2" style="background-color: #FF734C;" @click="goSettle">
					立即购买
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				navList: [{
						"pagePath": "/pages/index/index",
						"text": "首页",
						"icon": "&#xe71c;",
					},
					{
						"pagePath": "/pages/classification/classification",
						"text": "分类",
						"icon": "&#xe67c;",
					},
					{
						"pagePath": "/pages/shoppingCart/shoppingCart",
						"text": "购物车",
						"icon": "&#xe638;",
					},
					{
						"pagePath": "/pages/personalCenter/personalCenter",
						"text": "我的",
						"icon": "&#xe6e0;",
					},
				],
				pro_id: null,
				pro_info: null,
				descList: [{
					title: '材料',
					content: '19枝红玫瑰，火龙珠，银叶菊绿叶搭配'
				}, {
					title: '包装',
					content: '黑色韩式包装'
				}, {
					title: '配送',
					content: '全国送货上门，市区免运费'
				}, {
					title: '附送',
					content: '下单填写留言，免费赠送贺卡'
				}, ],
				num: 1,
				commentList: [],
				goodsList: []
			}
		},
		onLoad(option) {
			this.pro_id = option.id
			// let a = this.shoppingCartList.find(ele => ele.s_good.id === option.id)
			// console.log(a);
			this.getProInfo()
			this.getComment()
		},
		computed: {
			...mapState('userInfo', ['userInfo']),
			...mapGetters('cart', ['allNum'])
		},
		methods: {
			...mapMutations('cart', ['setshoppingCart']),
			showNav() {
				this.show = !this.show
			},
			getComment() {
				uni.$http.get('/api/goods', {
					project_id: 319,
					limit: 1
				}).then(res => {
					this.commentList = res.data.result.rows
				})
			},
			formatPhone(phone) {
				return phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");

			},
			async getProInfo() {
				let res = await uni.$http.get(`/api/goods/${this.pro_id}`)
				this.pro_info = res.data.result
				if (!this.pro_info.desc) {
					return;
				}
				let descArr = this.pro_info.desc.split(' ')
				this.descList.forEach((item, i) => {
					item.content = descArr[i]
				})
			},
			// 加入购物车
			async addCart() {
				if (!this.userInfo) {
					let pages = getCurrentPages()
					let currentPage = pages[pages.length - 1]
					this.$refs.uToast.show({
						type: 'error',
						message: "您还没登录，正在跳转...",
						duration: 1000,
						position: "top",
						complete() {
							uni.navigateTo({
								url: `/login/login?page=${currentPage.route}&id=${currentPage.options.id}`
							})
						}
					})
					return;
				}
				await uni.$http.post('/api/shoppingCart', {
					goods_id: this.pro_info.id,
					num: this.num,
					project_id: "319"
				})
				return this.getShoppingCart()
			},
			getShoppingCart() {
				return uni.$http.get('/api/shoppingCart', {
					project_id: 319
				}).then(res => {
					this.setshoppingCart(res.data.result)
					this.goodsList[0] = res.data.result.find(ele => ele.s_good.id == this.pro_id)
				})
			},
			// 去购物车
			goCart() {
				uni.switchTab({
					url: "/pages/shoppingCart/shoppingCart"
				})
			},
			// 立即购买
			goSettle() {
				this.addCart().then(res => {
					if (!this.userInfo) return
					let data = this.goodsList
					uni.setStorageSync('goodsList', data)
					uni.navigateTo({
						url: '/settle/settle',
					})
				})
			},
			goComment() {
				uni.navigateTo({
					url: '/detail/comment'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		padding-bottom: 60px;

		.detail_top {
			width: 100%;
			height: 50px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			z-index: 999;

			.nav {
				width: 40rpx;
				position: absolute;
				right: 4%;
			}

			.logo {
				width: 20%;
			}

			.nav_list {
				width: 20%;
				position: absolute;
				bottom: -260%;
				right: 6%;
				background-color: #fff;
				padding: 20rpx;
				line-height: 30px;
				z-index: 1000;
				box-shadow: 0 4px 12px 0 #e9ecf0;

				.nav_item {
					display: flex;
					align-items: center;
				}
			}
		}

		.detail_cont {
			padding-top: 50px;

			.banner {
				width: 100%;
				height: 375px;
			}

			.info {
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 2px;
				background-color: #fff;

				.pro_name {
					font-size: 16px;
					font-weight: 600;
					padding-bottom: 10px;
				}

				.pro_sale {
					display: flex;
					justify-content: space-between;

					.sale_price {
						font-size: 20px;
						font-weight: 600;
						color: #FF734C;

						.price {
							color: #B4BABF;
							font-size: 14px;
							text-decoration: line-through;
							padding-left: 10rpx;
						}
					}

					.sold_num {
						font-size: 12px;
					}
				}
			}

			.desc {
				padding: 5px 30rpx;
				background-color: #fff;

				.desc_item {
					display: flex;
					line-height: 40px;

					.content {
						flex-grow: 1;
						border-bottom: 1px solid #e9ecf0;
						margin-left: 50rpx;
					}
				}
			}

			.num {
				display: flex;
				padding: 30rpx;
				margin: 8px 0;
				line-height: 30px;
				background-color: #fff;
				position: relative;

				.title {
					margin-right: 50rpx;
				}

				.stock_num {
					position: absolute;
					right: 4%;
					color: #B4BABF;
				}
			}

			.comment {
				background-color: #fff;
				padding-bottom: 20px;

				.comment_top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 52px;
					padding: 0 30rpx;

					.comment_num {
						font-size: 12px;
					}
				}

				.comment_list {
					.comment_item {
						border-top: 1px solid #f1f1f1;
						padding: 5px 30rpx 20px;
						color: #555;

						.item_head {
							line-height: 40px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.item_head_user {
								display: flex;
								align-items: center;

								.item_head_user_phone {
									font-size: 14px;
									padding-left: 18px;
								}
							}

							.item_head_star {
								display: flex;
							}
						}

						.item_body {
							.item_body_text {
								font-size: 14px;
								line-height: 20px;
								margin: 5px 0 10px;
							}

							.item_body_img {
								display: flex;
								align-items: center;

								.img {
									width: 15%;
									margin-right: 3px;
								}
							}
						}
					}
				}

				.comment_bottom {
					border: 1px solid #232628;
					width: 23%;
					line-height: 28px;
					text-align: center;
					font-size: 12px;
					margin: 15px auto 0;
				}
			}

			.pro_detail {
				background-color: #fff;
				margin-top: 8px;

				.title {
					padding: 30rpx;
				}
			}
		}

		.detail_bottom {
			width: 100%;
			display: flex;
			align-items: flex-end;
			font-size: 12px;
			background-color: #fff;
			position: fixed;
			bottom: -1px;
			left: 0;
			z-index: 999;

			.nav_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-grow: 1;
				border-right: 1px solid #f1f1f1;
				position: relative;
				padding: 3px 0;

				.icon {
					font-size: 24px;
				}

				.dot {
					width: 32rpx;
					line-height: 16px;
					text-align: center;
					background-color: red;
					color: #fff;
					position: absolute;
					border-radius: 50%;
					right: 15%;
					top: -5%;
				}
			}

			.nav_item2 {
				width: 30%;
				text-align: center;
				line-height: 50px;
				color: #fff;
			}

		}
	}
</style>